<template>
  <el-container>
    <el-main>
      <div class="member-container">
        <div class="member-header">
          <img
            :src="getImageUrl(user.avatarUrl)"
            align="middle"
            style="border-radius: 8px; width: 100px; height: 100px"
          />
          <h1
            style="
              display: inline-block;
              margin: 0 5px 0px 20px;
              color: #409eff;
            "
          >
            {{ user.nickname ? user.nickname : user.username }}
          </h1>
          <h1
            :class="user.sex ? 'el-icon-male' : 'el-icon-female'"
            :style="user.sex ? 'color: #409eff;' : 'color: #fb7299;'"
            style="font-weight: bolder"
          />
        </div>
        <ul class="member-content">
          <li>
            账号：<span>{{ user.username }}</span>
          </li>
          <li>
            手机号：<span>{{ user.mobile }}</span>
          </li>
          <li>
            邮箱：<span>{{ user.email }}</span>
          </li>
          <li>
            地址：<span>{{ user.address }}</span>
          </li>
        </ul>
      </div>
    </el-main>
  </el-container>
</template>
<script>
import { mapGetters } from 'vuex'
import { mixin } from '@/mixins'
export default {
  mixins: [mixin],
  data() {
    return {
      user: { imageUrl: '' }
    }
  },
  activated() {
    this.user = this.getUser()
    console.log(this.user)
  },
  methods: {
    ...mapGetters(['getUser'])
  }
}
</script>

<style scoped>
.el-container {
  background-size: 100% 100%;
}
.el-main {
  margin: 20px auto;
}
.member-container {
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  max-width: 1225px;
  min-height: 700px;
}
.member-container .member-header {
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 0;
}
.member-container .member-content {
  padding: 10px 0;
  font-size: 24px;
  color: #6e6666;
}
.member-container .member-content li {
  margin: 20px;
}
.member-container .member-content li span {
  font-size: 20px;
  color: rgb(221, 65, 26);
}
</style>
